import React, { memo, useDeferredValue, useState } from 'react'
import nameArray from './namesArray'

export default memo(function App() {
  const [showName, setShowName] = useState(nameArray)
  const deferedShowNames = useDeferredValue(showName)

  function valueChangeHandle(e) {
    const keyword = e.target.value
    const filterShowNames = nameArray.filter((item) => item.includes(keyword))
    setShowName(filterShowNames)
  }

  return (
    <div>
      <input type="text" onInput={valueChangeHandle} />
      <h2>用户名的列表</h2>
      <ul>
        {deferedShowNames.map((item, index) => {
          return <li key={index}>{item}</li>
        })}
      </ul>
    </div>
  )
})
